package myJs.cps.project

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.reactBootstrap.{OverlayTrigger, Popover}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.ReactElement
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object FeatureCp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    div(
      h5(style := Style(marginBottom = 15, fontSize = 16, marginTop = 15), id := "sFeature",
        "Feature Heatmap ",
        {
          val popover: ReactElement = Popover(id = "popover-basic")(
            Popover.Title("Note"),
            Popover.Content(
              "Heatmap of feature genes using median expression of features in each cluster "
            )
          )
          OverlayTrigger(
            placement = "right",
            trigger = js.Array("focus", "hover"),
            overlay = popover
          )(
            span(
              a(`type` := "button",
                i(className := "fas fa-info-circle")
              )
            )
          )
        }
      ),
      div(style := Style(width = "90%"),

        div(style := Style(display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
          div(style := Style(marginLeft = 5, marginBottom = 5), className := "btn-group",
            a(title := "Export image", className := "btn  btn-default idsButton", data - "toggle" := "dropdown",
              data - "hover" := "dropdown", data - "close-others" := "true", aria - "expanded" := "false",
              i(className := "fa fa-bars")
            ),
            ul(className := "dropdown-menu pull-right",
              li(
                a(href := s"${Api.outImagesDownload}/scheatmap_use.png", "Download PNG image")
              ),
            )
          )
        ),
        img(style := Style(width = "100%"), src := s"${Api.outImages}/scheatmap_use.png")
      )

    )


  }

}
